<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <title>@小亿-智能文本机器人</title>
    <script type="text/javascript" src="../static/jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.modal.js"></script>
    <script type="text/javascript" src="../static/jQuery-typewriter/typewriter.js"></script>
    <script type="text/javascript" src="../static/clipboard/clipboard.min.js"></script>
    <link href="../static/css/chatBot/style_new.css" type="text/css" rel="stylesheet"/>
    <!--    <link rel="icon" href="data:;base64,="> -->
    <link rel="icon" href="../static/favicon.ico">
    <script type="text/javascript" src="../static/config/config.js"></script>
</head>

<body>
<div class="wrap" id="app">
    <div class="header">
        <div class="header-title">
            <h1><span>@小亿</span>智能文本机器人</h1>
        </div>
        <div>
            <!-- 这里使用el-select组件 -->
            <el-select v-model="selected" placeholder="请选择" @change="botTypeChange">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>
    <div class="content">
        <div class="qq-box">
            <div class="qq-content" id="msgDiv">
                <input name="zxUserId" id="zxUserId" value="${zxUserId }" type="hidden"/>
                <ul class="qq-list">
                    <li class="media-left">
                        <div class="inner">
                            <a class="thumb"></a>
                            <div class="cc">
                                您好，欢迎接入@小亿智能文本机器人，我们将竭诚为您提供在线咨询服务!
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="qq-foot">
                <div class="input-wrap">
                    <textarea class="chart-input" type="text" placeholder="请输入您想咨询的内容" id="sendMsgInput"></textarea>
                    <div class="actions" id="chatActions">
                        <button class="qq-btn qq-btn-default lh24 w100" type="button" id="sendMsgBtn">发送</button>
                        <p class="sent-tips">Enter 键发送</p>
                    </div>
                    <div class="actions hide" id="orcActions">
                        <button class="qq-btn qq-btn-default lh24 w100" type="button" id="sendMsgBtnOrc">发送</button>
                        <p class="sent-tips">Enter 键发送</p>
                    </div>
                    <div class="actions hide" id="pdfActions">
                        <button class="qq-btn qq-btn-default lh24 w100" type="button" id="sendMsgBtnPdf">发送</button>
                        <p class="sent-tips">Enter 键发送</p>
                    </div>
                    <div class="actions hide" id="onlineDocActions">
                        <button class="qq-btn qq-btn-default lh24 w100" type="button" id="sendMsgBtnOnlineDoc">发送
                        </button>
                        <p class="sent-tips">Enter 键发送</p>
                    </div>
                    <div class="actions hide" id="policyDisassembleActions">
                        <button class="qq-btn qq-btn-default lh24 w100" type="button" id="sendMsgBtnPolicy">发送</button>
                        <p class="sent-tips">Enter 键发送</p>
                    </div>
                    <div class="actions hide" id="sameCaseActions">
                        <button class="qq-btn qq-btn-default lh24 w100" type="button" id="sendMsgBtnSameCase">发送
                        </button>
                        <p class="sent-tips">Enter 键发送</p>
                    </div>
                    <div class="actions hide" id="carLicenseAction">
                        <button class="qq-btn qq-btn-default lh24 w100" type="button" id="sendMsgBtnCarLicense">发送
                        </button>
                        <p class="sent-tips">Enter 键发送</p>
                    </div>
<!--                    <div class="input-wrap-icon" id="imgFileBtn" style="display: none;">-->
<!--                        <img src="../static/images/zxkf_new/new/add.png" alt="">-->
<!--                    </div>-->
                    <form enctype="multipart/form-data" id="imgForm" style="display: none;">
                        <input type="file" name="imgFile" accept="image/png,image/gif,image/jpeg" id="imgFile"/>
                    </form>
                </div>
            </div>
        </div>
        <div class="right-body">
            <div class="right-body-title">热门词条</div>
            <div class="right-body-list">
                <div class="right-body-item">
                    <div class="right-body-dot"></div>
                    企业注册
                </div>
                <div class="right-body-item">
                    <div class="right-body-dot"></div>
                    公积金查询
                </div>
                <div class="right-body-item">
                    <div class="right-body-dot"></div>
                    小汽车摇号/竞价
                </div>
                <div class="right-body-item">
                    <div class="right-body-dot"></div>
                    个人参保证明
                </div>
                <div class="right-body-item">
                    <div class="right-body-dot"></div>
                    生育津贴支付
                </div>
                <div class="right-body-item">
                    <div class="right-body-dot"></div>
                    劳动保险
                </div>
                <div class="right-body-item">
                    <div class="right-body-dot"></div>
                    社保查询
                </div>
                <div class="right-body-item">
                    <div class="right-body-dot"></div>
                    生育登记
                </div>
                <div class="right-body-item">
                    <div class="right-body-dot"></div>
                    人才引进
                </div>
                <div class="right-body-item">
                    <div class="right-body-dot"></div>
                    租房提取
                </div>
            </div>
        </div>
    </div>
</div>


<!--弹窗 详情-->
<!-- 弹窗中等宽度 modal mid -->
<!-- 弹窗最大宽度 modal lg -->
<div class="modal hide" id="Modal-detail">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>知识详情</h4>
    </div>
    <div class="modal-body">
        <p>您好,职工个人可贷额度按住房公积金账户月均余额的一定倍数计算确定,计算公式为:职工个人可贷额度=职工住房公积金账户月均余额x倍数中:职工住房公积金账户月均余额为职工申请住房公积金贷款时近12个月(
            不含申请当月)的住房公积金账户月均余额(不含近12个月的一次性补缴) ,
            不足12个月的按实际月数计算;杭州市主城区、萧区、余杭区、富阳区、临安区的倍数目前按15倍确定;职工个人可贷额度计算结果四舍五入,精确至千位,低于15万元的按15万元确定,于50万元的按50万元确定。职工及配偶均缴存住房公积金且符合贷款申请条件的,每年最高贷款限额为100万元。具体可贷额度同时根据职工所购住房的状况和价格、个人还款能力和信用状况等因素综合确定。
        </p>
    </div>
</div>

<!-- 事项查询表单 -->
<div class="modal hide" id="Modal-form">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>进度查询</h4>
    </div>
    <!-- 以下是有垂直tab标签的 -->
    <div class="modal-body">
        <form class="progress-form mt20">
            <input type="text" placeholder="请输入诉求编号">
            <input type="text" placeholder="请输入联系电话">
            <a class="btn btn-default">查 询</a>
        </form>
        <hr class="mt20 mb15">
        <p class="pb10 tc"></a>您可凭诉求编号和手机号码在首页<a href="../index.html" target="_blank">【进度查询】</a>自助查询或致电12345查询进度</p>
    </div>
</div>

<div class="img-pop-mask" onclick="toHide()"></div>
<!-- 图片 -->
<div class="zoom-img-cc img-pop" onclick="toHide()">
    <img onclick="toHide()" class="con-img">
</div>
<!-- 视频 -->
<div class="zoom-img-cc video-pop">
    <!-- <div class=""> -->
    <video src="" autoplay controls="controls">不支持播放此视频</video>
    <a onclick="toHide()" class="close">&times;</a>
    <!-- </div> -->

</div>

<script type="text/javascript">
    //所有faq类目信息
    var FAQ_CATEGORY_DATA = {};
    var receiveFaqCategoryFlag = false;
    //当前会话id
    var currentSessionId = null;

    $(function () {
        $.ajax({
            url: basePath + "/chatBot/createChatBotSession",
            type: "POST",
            data: JSON.stringify({
                userId: guid(),
                userPhone: "13760784102",
                userName: "游客13760784102"
            }),
            contentType: "application/json;",
            success: function (resp) {
                if (resp.code != 1) {
                    alert("创建人机会话失败");
                } else {
                    currentSessionId = resp.data.sessionId
                }
            }
        })
    })

    var $qqList = $(".qq-list");

    //faq类目tab点击事件
    $qqList.on("click", "a[data-toggle=tab]", function () {
        $(this).parent().addClass("active").siblings().removeClass("active");
        var index = $(this).parent().index();
        var parentSel = $(this).parents(".tab").siblings(".tab-content");
        $(parentSel).find(".tab-pane").eq(index).addClass("active").siblings().removeClass("active");
        $(parentSel).find(".tab-pane").eq(index).fadeIn("fast");
    });

    //faq换一换功能
    $qqList.on("click", ".faq-change-btn", function () {
        var $tabPane = $(this).parents(".tab-pane");
        var categoryId = $tabPane.attr("id").split("_")[1];
        var pageNumber = $tabPane.attr("pageNumber");
        if (!pageNumber) {
            pageNumber = 0;
        }
        $tabPane.empty().append(faqListHtml(parseInt(pageNumber) + 1, FAQ_CATEGORY_DATA[categoryId].children, $tabPane));
    });

    //faq点击事件
    $qqList.on("click", ".question-list-item", function () {
        var faqId = $(this).attr("id");
        var content = $(this).children(".question-list-item-content").eq(0).text();
        send(content, content);
    });

    //faq答案查看更多
    $qqList.on("click", ".more", function () {
        var faqDetail = "<p>" + $(this).parent().siblings(".page-info-ell").eq(0).html() + "</p>";
        $("#Modal-detail .modal-body").html(faqDetail);
        $("#Modal-detail").modal();
    });

    //人工服务点击事件
    $qqList.on("click", ".guess-you-question-img", function () {
        endChatBotSession();
    });

    //有帮助无帮助按钮点击事件（点赞点踩）
    $qqList.on("click", ".guess-you-reply-item", function () {
        $(this).addClass("disable").addClass("active");
        $(this).siblings().addClass("disable");
        var $parent = $(this).parents(".guess-you-reply").eq(0);
        var messageId = $parent.attr("messageId");
        var feedbackRequest = {
            "messageId": messageId,
            "feedback": null,
            "feedbackContent": null,
            "sessionId": currentSessionId
        };
        if ($(this).hasClass("bad")) { //无帮助
            //appendReceive("抱歉我们没有给您满意的解答，可通过人工客服反馈您的诉求<div class='guess-you-question'><div class='guess-you-question-img'></div></div>", "feedback");
            appendReceive("抱歉我们没有给您满意的解答", "feedback");
            toBottom(true);
            feedbackRequest.feedback = 2;
        } else if ($(this).hasClass("good")) { //有帮助
            appendReceive("谢谢您的肯定，我们会继续努力！", "feedback");
            feedbackRequest.feedback = 1;
        }
        if (messageId) {
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: basePath + "/chatBot/feedback",
                data: JSON.stringify(feedbackRequest),
                dataType: "json",
                success: function (data) {
                }
            });
        }
    });

    function guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    //消息发送区域，“发送”按钮事件
    $("#sendMsgBtn").click(function () {
        textSend();
    });

    //消息发送区域，键盘监听事件
    $("#sendMsgInput").keypress(function (e) {
        var $self = $(this);
        if ((e.which === 13 && e.ctrlKey) || (e.which === 10 && e.ctrlKey)) {
            // 这里实现换行
            var content = $self.val();
            $self.val(content + "\n");
        } else if (e.which === 13) {
            // 避免回车键换行
            e.preventDefault();
            textSend();
        }
    });

    //输入框的消息发送
    function textSend() {
        var $sendMsgInput = $("#sendMsgInput");
        var sourceContent = $sendMsgInput.val().trim();
        if (sourceContent === "人工" || sourceContent === "人工客服" || sourceContent === "在线客服" || sourceContent === "转人工"
            || sourceContent === "转客服" || sourceContent === '人工服务') {
            endChatBotSession();
        } else {
            send(sourceContent, sourceContent);
        }
        $sendMsgInput.val('');
        $('.input-wrap-send').hide();
        $('.input-wrap-icon').show();
    }

    function endChatBotSession() {
        $.ajax({
            url: basePath + "/chatBot/endChatBotSession",
            type: "POST",
            data: JSON.stringify({
                sessionId: currentSessionId
            }),
            contentType: "application/json;",
            success: function (resp) {

            }
        });
        appendReceive("人工客服繁忙，请稍后再试", "transfer");
    }

    //文本发送，兼容操作按钮事件的发送
    function send(sendContent, showContent) {
        //如果内容为空，不发送
        if (!sendContent) {
            alert("发送内容为空");
            return;
        }
        var regexp = new RegExp(/<\/?[^>]*>/g);
        if (regexp.test(showContent)) {
            alert("输入内容不能含有非法字符");
            return;
        }
        appendSend(showContent);
        $.ajax({
            url: basePath + "/chatBot/chat",
            type: "POST",
            data: JSON.stringify({
                sessionId: currentSessionId,
                question: sendContent,
                chatApiType: $("#botType").val()
            }),
            contentType: "application/json;",
            success: function (resp) {
                if (resp.code != "1") {
                    alert("发送消息失败");
                } else {
                    appendReceive(resp.data, "chat");
                }
            }
        })
    }

    function toBottom(flag) {
        var e = document.getElementById('msgDiv');
        $(e).scrollTop($(e).prop('scrollHeight'));
    }

    function appendReceive(data, msgType) {
        var contentArray = [];
        // 消息为FAQ类目
        if (msgType === "faqSort") {
            if (data.faqSortList && data.faqSortList.length > 0) {
                receiveFaqCategoryFlag = true;
                var tab = '<div class="tab" id="Nav"><ul>';
                var tabContent = '<div class="tab-content mt10">';
                $.each(data.faqSortList, function (index, faqSort) {
                    FAQ_CATEGORY_DATA[faqSort.id] = faqSort;
                    var active = index === 0 ? 'active' : '';
                    tab += '<li class="' + active + '" onclick="activefun(event, \'#Nav\')"><a data-toggle="tab" id="' + faqSort.id + '">' + faqSort.name + '</a></li>';
                    tabContent += '<div class="tab-pane ' + active + '" id="tabPane_' + faqSort.id + '" pageNumber="1">' + faqListHtml(1, faqSort.children) + '</div>';
                });
                tab += '</ul></div>';
                tabContent += '</div>';
                contentArray.push({
                    textWrapId: null,
                    contentHtml: tab + tabContent,
                    tabContentHtml: null,
                    relatedContentHtml: null
                });
            }
        } else if (msgType === "chat") {
            $.each(data.messages, function (index, message) {
                var textWrapId = "textWrap_" + parseInt(Math.random() * 1000000);
                if ("Knowledge" === message.type) {
                    // 关联faq
                    var relatedContent = "";
                    var relatedKnowledgeList = message.knowledge.relatedKnowledges;
                    if (relatedKnowledgeList && relatedKnowledgeList.length > 0) {
                        relatedContent = '<div class="question-list-tit">猜您想问：</div>' + '<div class="question-list-item-wrap">';
                        $.each(relatedKnowledgeList, function (index, relatedKnowledge) {
                            relatedContent += '<div class="question-list-item" id="' + relatedKnowledge.knowledgeId + '"><div class="question-list-item-content">' + relatedKnowledge.title + '</div>' +
                                '<span class="question-list-item-icon"></span></div>';
                        });
                        relatedContent += '</div>';
                    }
                    contentArray.push({
                        textWrapId: textWrapId,
                        contentHtml: knowledgeAnswerHtml(message.knowledge, data.messageId),
                        relatedContentHtml: relatedContent
                    });
                } else if ("Recommend" === message.type) {
                    contentArray.push({
                        textWrapId: textWrapId,
                        relatedContentHtml: recommendListHtml(message.recommends)
                    });
                } else if ("Text" === message.type) {
                    contentArray.push({
                        textWrapId: textWrapId,
                        contentHtml: '<div id="' + textWrapId + '">' + message.text.content + '</div>'
                    });
                } else if ("ChatGlm" === message.type) {
                    contentArray.push({
                        textWrapId: textWrapId,
                        contentHtml: '<div id="' + textWrapId + '">' + message.chatGlmAnswer.content + '</div>'
                    });
                } else if ("ContextChat" === message.type) {
                    var feedbackDiv = '<div class="guess-you-reply"><div class="guess-you-reply-item"><div class="img good"></div>有帮助</div><div class="guess-you-reply-item bad"><div class="img bad"></div>无帮助</div></div>';
                    var tabId = "Nav_" + parseInt(Math.random() * 1000000);
                    var contextChatAnswer = message.contextChatAnswer;
                    var content = contextChatAnswer.content;
                    var tabTitles = contextChatAnswer.tabTitles;
                    var tabContents = contextChatAnswer.tabContents;
                    var obj = {};
                    if (content) {
                        var textWrapId = "textWrap_" + parseInt(Math.random() * 1000000);
                        var panelTitleDiv = '<div class="tab"><ul><li class="active"><a>问题解答</a></li></ul></div>';
                        //var tipsDiv = '<div class="page-info-ell"><div>' + tips + '</div></div>';
                        var tipsDiv = '<div id="' + textWrapId + '">' + content + '</div>';
                        var panelContentDiv = '<div class="answer-tab mt10"><div class="tab-pane active">' + tipsDiv + '</div></div>';
                        obj = {
                            textWrapId: textWrapId,
                            contentHtml: panelTitleDiv + panelContentDiv + feedbackDiv
                        }
                    }
                    if (tabTitles && tabTitles.length > 0) {
                        var titleLi = '';
                        var tabPanel = '';
                        for (var i = 0; i < tabTitles.length; i++) {
                            var title = tabTitles[i];
                            var content = tabContents[i];
                            if (!content) {
                                continue;
                            }
                            var activeClass = '';
                            if (i === 0) {
                                activeClass = 'active';
                            }
                            titleLi += '<li onclick="activefun(event, \'#' + tabId + '\')"><a data-toggle="tab" class="' + activeClass + '">' + title + '</a></li>';
                            tabPanel += '<div class="tab-pane ' + activeClass + '"><div>' + content + '</div></div>';
                        }
                        obj.tabContentHtml = '<div class="tab" id="' + tabId + '"><ul>' + titleLi + '</ul></div>' + '<div class="tab-content mt10">' + tabPanel + '</div>';
                    }
                    contentArray.push(obj);
                } else if ("Debug" === message.type) {
                    contentArray.push({
                        contentHtml: message.debugInfo.content
                    });
                } else {
                    contentArray.push({
                        contentHtml: "未知的type类型"
                    });
                }
            });
        } else {
            contentArray.push({
                contentHtml: data
            });
        }
        if (contentArray && contentArray.length > 0) {
            $.each(contentArray, function (index, obj) {
                if (obj.contentHtml) {
                    var mediaLeftId = "mediaLeft_" + parseInt(Math.random() * 1000000);
                    $qqList.append("<li class='media-left' id='" + mediaLeftId + "'><div class='inner'><a class='thumb'></a><div class='cc'>" + obj.contentHtml + "</div></div></li>");
                    $("#" + mediaLeftId + " .source-box .con").each(function () {
                        if ($(this).height() >= 30) {
                            $(this).css("height", 20)
                            $(this).parents(".ll").siblings(".controls").show()
                        } else {
                            $(this).css("height", "auto")
                            $(this).parents(".ll").siblings(".controls").hide()
                        }
                    });
                    toBottom(true);
                }
                if (obj.relatedContentHtml) {
                    $qqList.append("<li class='media-left'><div class='inner'><a class='thumb'></a><div class='cc'>" + obj.relatedContentHtml + "</div></div></li>");
                    toBottom(true);
                }
                if (obj.textWrapId) {
                    var textWrap = document.getElementById(obj.textWrapId);
                    if (obj.tabContentHtml) {
                        if (textWrap) {
                            textWrap.typewriter(function () {
                                $("#" + obj.textWrapId).parents(".answer-tab").after("<hr>" + obj.tabContentHtml);
                                toBottom(true);
                            });
                        }
                    } else {
                        if (textWrap) {
                            textWrap.typewriter(function () {
                                toBottom(true);
                            });
                        }
                    }
                }
            })
        }
    }

    // 添加发送的内容
    function appendSend(msg) {
        $qqList.append("<li class='media-right'><div class='inner'><a class='thumb'></a><div class='cc'>" + msg.replace(/[\n\r]/g, '<br/>') + "</div></div></li>");
        toBottom(true);
    }

    // 组装faq的html
    function faqListHtml(pageNumber, faqDataList, $tabPane) {
        var pageSize = 5;
        var refreshBtn = '<div class="right"><a class="f12 color-gray faq-change-btn"><span class="vm"></span>换一换</a></div>';
        if (faqDataList && faqDataList.length <= pageSize) {
            refreshBtn = '';
        }
        return baseFaqList(pageNumber, pageSize, faqDataList, $tabPane, refreshBtn, "猜您想问：");
    }

    function baseFaqList(pageNumber, pageSize, faqDataList, $tabPane, refreshBtn, tabTitle) {
        var faqContent = '<div class="question-list-tit">' + tabTitle + refreshBtn + '</div>'
            + '<div class="question-list-item-wrap">';
        if (faqDataList && faqDataList.length > 0) {
            var pages = faqDataList.length % pageSize === 0 ? Math.trunc(faqDataList.length / pageSize) : (Math.trunc(faqDataList.length / pageSize) + 1);
            if (pageNumber >= pages) {
                if ($tabPane) {
                    $tabPane.attr("pageNumber", 0);
                }
            } else {
                if ($tabPane) {
                    $tabPane.attr("pageNumber", pageNumber);
                }
            }
            if (pageNumber > pages) {
                pageNumber = 1;
            }
            let start = (pageNumber - 1) * pageSize;
            let end = pageNumber * pageSize - 1;
            for (var i = start; i < faqDataList.length; i++) {
                if (i <= end) {
                    var faq = faqDataList[i];
                    faqContent += '<div class="question-list-item" id="' + faq.id + '"><div class="question-list-item-content">' + faq.name + '</div>' +
                        '<span class="question-list-item-icon"></span></div>';
                }
            }
        }
        faqContent += '</div>';
        return faqContent;
    }

    // 组装相关推荐
    function recommendListHtml(recommendList) {
        var faqContent = '<div class="question-list-tit">猜您想问：</div>' + '<div class="question-list-item-wrap">';
        $.each(recommendList, function (index, recommend) {
            faqContent += '<div class="question-list-item" id="' + recommend.knowledgeId + '"><div class="question-list-item-content">' + recommend.title + '</div>' +
                '<span class="question-list-item-icon"></span></div>';
        });
        faqContent += '</div>';
        return faqContent;
    }

    // 知识点答案html组装
    function knowledgeAnswerHtml(knowledge, messagId) {
        var answerHtml = ''
        var content = knowledge.content;
        if (!content || content === "无答案") {
            return answerHtml;
        }
        switch (knowledge.contentType) {
            case "TEXT":
            //content = replaceUrlWithLink(content);
            case "RICH_TEXT":
                answerHtml += '<div class="tab"><ul><li class="active"><a data-toggle="tab">问题解答</a></li></ul></div>'
                    + '<div class="tab-content mt10"><div class="tab-pane active">';
                if (content.replace(/<.*?>/g, "").length > 120) {
                    answerHtml += '<div class="page-info-ell"><div>' + content + '</div></div>'
                        + '<div class="tc mt5 mb5"><a class="more">查看更多</a></div>';
                } else {
                    answerHtml += '<div><div>' + content + '</div></div>'
                }
                if (knowledge.source) {
                    answerHtml += '<div class="source-box"><div class="ll"><div class="tt"><i class="icon-source"></i>来源：</div>' +
                        '<div class="con">' + knowledge.source + '</div></div><a class="controls"><span>展开</span><i></i></a></div>'
                }
                answerHtml += '<div class="guess-you-reply" knowledgeid="' + knowledge.id + '" messageId="' + messagId + '">'
                    + '<div class="guess-you-reply-item good"><div class="img good"></div>有帮助</div>'
                    + '<div class="guess-you-reply-item bad"><div class="img bad"></div>无帮助</div>'
                    + '</div></div></div>';
                break;
            case "IMAGE":
                answerHtml += '<div class="media-wrap" onclick="zoomImgFun(this)">'
                    + '<img class="media-size" src="' + content + '" data-src="' + content + '" alt=""></div>';
                break;
            case "AUDIO":
                break;
            case "VIDEO":
                break;
            case "ATTACHMENT":
                break;
        }
        return answerHtml;
    }

    //url转换成超链接
    function replaceUrlWithLink(msg) {
        var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
        return msg.replace(exp, "<a href='$1' target='_blank' class='link'>$1</a>");
    }

    // faq类目tab点击事件，导航条点击滚动
    var ulWidth // 计算ul总宽度
    function activefun(event, id) {
        var target = event.target
        ulWidth = 0
        // 设置class
        $(id).find("li").each(function () {
            ulWidth += $(this).offsetWidth // 累加宽度
            $(this).children("a")[0].classList.remove("active")
        });
        target.classList.add("active");
        var index = $(target).parent().index();
        var parentSel = $(target).parents(".tab").siblings(".tab-content");
        $(parentSel).find(".tab-pane").eq(index).addClass("active").siblings().removeClass("active");
        $(parentSel).find(".tab-pane").eq(index).fadeIn("fast");

        // 判断点击元素是否超过一半
        var width = $(target).parents(".cc").width() / 2 //一半屏幕宽度
        var leftw = (target.offsetWidth / 2) + target.offsetLeft // 点击元素中点距离屏幕左侧
        var rightw = ulWidth - leftw // 点击元素中点距离屏幕右侧
        if (leftw > width) {
            // 使用animate设置scrollLeft，
            $(id).animate({scrollLeft: leftw - width}) // 滚动到中间
        } else if (rightw < width) {
            $(id).animate({scrollLeft: (window.devicePixelRatio * window.innerWidth) - ulWidth}) // 滚动到末尾
        } else {
            $(id).animate({scrollLeft: 0}) //滚动到最前
        }
    }

    $(function () {
        //显示发送按钮
        $('.chart-input').bind('input propertychange', function () {
            if (window.screen.width >= 960) {
                return false
            } else {
                var length = $(".chart-input").val().length;
                if (length > 0) {
                    $('.input-wrap-icon').hide()
                    $('.input-wrap-send').show()
                } else {
                    $('.input-wrap-icon').show()
                    $('.input-wrap-send').hide()
                }
            }
        });

        $('a[data-toggle=tab]').click(function () {
            $(this).parent().addClass("active").siblings().removeClass("active");
            selector = $(this).attr("data-target");
            parentSel = $(this).parents(".tab").siblings(".tab-content");
            $(parentSel).find($(selector)).addClass("active").siblings().removeClass("active");
            $(parentSel).find($(selector)).fadeIn("fast");
        });

        $(".rate-actions a").click(function () {
            $(this).addClass("active")
            $(this).parents("p").siblings("p").children("a").removeClass("active")
        })
        $(".header .area .top").click(function (e) {
            $(this).siblings(".dropdown-menu").slideDown("fast")
            e.stopPropagation()
        })
        $(".header .dropdown-menu a").click(function () {
            $(".header .area .current").text($(this).text())
            $(".header .dropdown-menu").slideUp("fast")
        })
        $(document).on('click', function (e) {
            $(".header .dropdown-menu").hide()
            $(".complete-list").hide()
        });
        $(".complete-list a").on('click', function (e) {
            $(".chart-input").val($(this).text())
            $(".complete-list").hide()
            e.stopPropagation()
        });

        $('.btnGoTop').click(function () {
            $('.qq-content').animate({scrollTop: 0}, 300)
        });

        $('.btnClear').click(function () {
            $('.qq-list').empty()
        });
    })

    function toHide() {
        $(".zoom-img-cc, .img-pop-mask").fadeOut("fast")
        $("video").trigger("pause")
    }

    function zoomImgFun(obj) {
        $(".img-pop, .img-pop-mask").fadeIn("fast");
        $(".img-pop").children(".con-img")[0].src = $(obj).find(".media-size").attr("data-src");
    }

    function zoomVideoFun(obj) {
        $(".video-pop, .img-pop-mask").fadeIn("fast");
        $(".video-pop").children("video")[0].src = $(obj).attr("data-src");
    }

    var $qqList = $(".qq-list");
    // 播放音频
    $qqList.on("click", ".btn-show-voice", function () {
        var obj = $(this);
        $(".btn-show-voice").removeClass("active");
        $(this).addClass("active");
        var audio = document.getElementById("audio_" + obj.attr("id"));
        audio.currentTime = 0;
        audio.play();
        // 判断播完把gif去掉
        audio.addEventListener('ended', function () {
            obj.removeClass("active")
        }, false);
    })

    // $(".source-box .con").each(function(){
    //     if($(this).height()>=30){
    //         $(this).css("height",20)
    //         $(this).parents(".ll").siblings(".controls").show()
    //     }else{
    //         $(this).css("height","auto")
    //         $(this).parents(".ll").siblings(".controls").hide()
    //     }
    // })

    $("body").on("click", ".source-box .controls", function () {
        if ($(this).find("span").text() == "展开") {
            $(this).find("span").text("折叠")
            $(this).addClass("active")
            $(this).siblings(".ll").find(".con").css("height", "auto")

        } else {
            $(this).find("span").text("展开")
            $(this).removeClass("active")
            $(this).siblings(".ll").find(".con").css("height", 20)
        }
    })
</script>
</body>
</html>